<template>
  <!-- 页面-分配角色 -->
  <div class="run-mod-box" style="overflow: auto;">
    <InnerPageTable ref="appTable" :config="tableConfig">
      <!-- table bar 添加-->
      <div slot="table-bar">
        <RPButton
          optType="common"
          :text="$t('module.appManage.assignApp')"
          :disabled="orgId == ''"
          @click="assignAppliction"
        />
        <RPButton optType="batch" @click="deleted()" />
      </div>
    </InnerPageTable>
    <div class=""></div>
  </div>
</template>
<script>
import { CoreModuleName } from '@/const.js'
import { getAssignedAppList, deleteApplicationCodes } from '@/api/orgAssignAppApi.js'
import OrgSelectApp from './OrgSelectApp.vue'
import locales from './locales.js'
const COLUMN_WIDTH = window.RPConfig.COLUMN_WIDTH
export default {
  mixins: [locales],
  props: {
    topNode: {
      type: Boolean,
      default() {
        return false
      }
    },
    orgData: {
      type: Array,
      default() {
        return []
      }
    },
    orgId: {
      type: String,
      default() {
        return ''
      }
    },
    orgPath: {
      type: String,
      default() {
        return ''
      }
    },
    orgName: String
  },
  data() {
    return {
      category: 1,
      tenantCode: '',
      managementTypeList: {} // 权限类型数据
    }
  },
  computed: {
    tableConfig() {
      return {
        loadDataFn: getAssignedAppList,
        columnsFn: this.orgAssignRoleColumns
      }
    }
  },
  created: function() {
    this.init()
  },
  mounted: function() {},
  methods: {
    search(page = 1) {
      this.$refs['appTable'] && this.$refs['appTable'].load({ orgId: this.orgId }, page)
    },
    orgAssignRoleColumns() {
      return [
        {
          type: 'selection',
          width: 45,
          align: 'center'
        },
        {
          title: `${this.$t('module.appManage.appCode')}`,
          key: 'clientId'
        },
        {
          title: this.$t('module.appManage.appName'),
          key: 'appName'
        },
        {
          title: this.$t('module.appManage.domainName'),
          key: 'domainName'
        },
        // {
        //   title: this.$t("module.appManage.tenant"),
        //   align: "left",
        //   key: "tenantName"
        // },
        {
          title: this.$t('module.appManage.clientSecretPlaintext'),
          key: 'clientSecretPlaintext',
          width: 280
        },
        {
          title: this.$t('common.status'),
          align: 'center',
          minWidth: 80,
          maxWidth: 80 + COLUMN_WIDTH.MAX_WIDTH_MORE,
          key: 'enabled',
          render: (h, params) => {
            return h(
              'StatusButton',
              {
                // 修改StatusButton内容居中
                style: {
                  'justify-content': 'center'
                },
                props: {
                  status: params.row.enabled == 1 ? '0' : '1'
                }
              },
              params.row.enabled == 1 ? this.$t('common.enable') : this.$t('common.disable')
            )
          }
        }
      ]
    },
    async init() {
      // 当前租户
      let { userInfo } = $store.state[CoreModuleName]
      if (!userInfo) return
      this.tenantCode = userInfo.tenantCode
      this.category = userInfo.category
      this.search()
    },
    assignAppliction() {
      new this.$pageModal(
        OrgSelectApp,
        {
          props: {
            tenantCode: this.tenantCode,
            orgId: this.orgId,
            orgPath: this.orgPath,
            orgData: this.orgData
          }
        },
        data => {
          data && this.search()
        }
      )
    },
    deleted() {
      let list = this.$refs['appTable'].getSelectioned() || []
      if (list.length == 0) {
        this.$message.error(this.$t('module.appManage.warning.selectApp'))
        return
      }
      // 删除提示级别：普通
      new $confirm(this.$t('module.appManage.warning.confirmDeleteAssignedOrg'), this).then(() => {
        let param = {
          orgId: this.orgId,
          orgPath: this.orgPath,
          applicationVos: list,
          orgCode: this.orgData[0].orgCode,
          orgName: this.orgData[0].orgName,
          orgType: this.orgData[0].orgType,
          tenantCode: this.tenantCode
        }
        deleteApplicationCodes(param).then(res => {
          this.$message.success({
            content: this.$t('module.orgManage.deleteSuccess'),
            duration: 3
          })
          this.search()
        })
      })
    }
  },
  watch: {
    orgId: {
      handler(newVal, oldVal) {
        this.search(1)
      }
      // immediate: true
    }
  },
  directives: {}
}
</script>
